<template>
    <div>
        <t-header></t-header>

        <div class="w">
            <div class="publish">
                <el-select v-model="currentCatName" placeholder="请先选择分类名称，获取所有功能">
                    <el-option
                        v-for="item in catName.value"
                        :key="item"
                        :label="item"
                        :value="item">
                    </el-option>
                </el-select>

                <el-input v-model="album" placeholder="请先输入该图片集合名称，获取所有功能"></el-input>
                <el-upload
                    :before-upload="beforeUpload"
                    :show-file-list="false"
                    class="upload-demo"
                    :on-success="uploadOk"
                    action="http://47.105.157.158:3000/upload/upload/img">
                    <el-button size="small" type="primary">点击上传集合的预览图，获取所有功能的使用</el-button>
                </el-upload>
                
                <img v-if="previce != ''" class="previce" :src="`http://47.105.157.158:3000/images/upload/${previce}`" alt="">

                <el-upload
                    :before-upload="beforeUpload"
                    :on-success="uploadAll"
                    :show-file-list="false"
                    v-if="currentCatName != '' && album != '' && previce != ''"
                    class="upload-demo"
                    drag
                    :action="`http://47.105.157.158:3000/upload/cat/album/${currentCatName}/${currentUser}/${album}/${previce}`"
                    multiple>
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                </el-upload>
            </div>
        </div>
    </div>
</template>

<script>
import Header from '../../components/global/Header';
import Footer from '../../components/global/Footer';
import axios from 'axios';
import { onMounted, ref } from '@vue/composition-api';
import { Message } from 'element-ui';
export default {
    components: {
        't-header': Header,
        't-footer': Footer
    },
    beforeRouteEnter (to, from, next) {
        // 没有登录进行拦截
        if (!window.localStorage.getItem('token')) {
            let that = this;
            Message.error('您还没有登录，不能使用该功能');
            setTimeout(() => {
                next('/home');
            }, 2000);
        } else {
            next();
        }
    },
    setup(props, context) {
        // 配置axios
        axios.defaults.baseURL = 'http://47.105.157.158:3000';

        onMounted(() => {
            getCatName();
        })

        // 分类名称
        const catName = ref('');
        // 当前被选中的分类名称
        const currentCatName = ref('');
        // 获取分类名称
        const getCatName = async function () {
            let { data: res } = await axios.get('/get/cat');
            if (res.status != 200) 
                return context.parent.$message.error('获取分类名称失败，请刷新后重试');
            catName.value = ref(res.cat);
        }

        // 该图片集合名称
        const album = ref('');
        // 该集合预览图
        const previce = ref('');

        // 上传图片之间的判断
        const beforeUpload = function () {
            if (currentUser.value == '' || currentUser.value == undefined) {
                context.parent.$message.error('请重新登录后，再重试!');
                return false;
            }

            return true;
        }

        // 上传预览图
        const uploadOk = function (response) {
            if (response.status != 200)
                return context.parent.$message.error('上传预览图失败，请重新尝试');
            context.parent.$message.success('上传预览图成功');
            previce.value = response.path;
        }

        // 上传集合的图片
        const uploadAll = function(response) {
            if (response.status != 200)
                return context.parent.$message.error('上传图片失败，请退出登录后再重试');
            context.parent.$message.success('上传图片成功');
        }

        // 当前发布的用户
        let currentUser = ref(context.parent.$store.state.user.email);


        const methods = { getCatName, uploadOk, uploadAll, beforeUpload}

        return {
            ...methods,
            catName,
            currentCatName,
            album,
            previce,
            currentUser
        }
    }
}
</script>

<style lang="less" scoped>
.publish {
    width: 500px;
    margin: 100px auto 0;
    text-align: center;
    .el-select {
        width: 100%;
    }
    .el-input {
        margin: 10px 0;
    }
    .previce {
        width: 100%;
        height: 300px;
        margin: 20px 0;
    }
 
}
</style>